<!--
 * @Author: GKN
 * @Date: 2023-10-24 11:53:29
 * @LastEditTime: 2023-11-28 10:40:21
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\user\member\user.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div v-loading="loading">
        <el-form :model="form" label-width="120px" size="large">
            <el-form-item label="头像">
                <el-col :span="24">
                    <div class="userIconView ad-view shadow-1" @click="edit_usericon">
                        <img v-if="form.hearIcon" class="ad-img" :src="imgUrl+form.hearIcon" alt="">
                    </div>
                    <el-dialog v-model="is_usericon" title="" width="30%" style="border-radius:15px;">
                        <div style="font-size:24px;font-weight:bold;color:#333;">头像设置</div>
                        <div>
                            <el-upload
                                v-model:file-list="fileList"
                                ref="uploadfile"
                                class="avatar-uploader"
                                :action="imgUrl"
                                :auto-upload="false"
                                @change="handleUploadChange"
                            >
                                
                                <div style="padding-top:66px;">
                                    <div class="btn-submit">上传头像</div>
                                    <div>图片格式jpg、png、jpeg,大小不超过10MB</div>
                                </div>
                                
                            </el-upload>
                            <el-progress v-if="progress" :percentage="progress" />
                        </div>
                    </el-dialog>
                </el-col>
            </el-form-item>
            <el-form-item label="昵称">
                <el-col :span="24"><el-input v-model="form.name" /></el-col>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="form.sex">
                    <el-radio :label="1" >男</el-radio>
                    <el-radio :label="2" >女</el-radio>
                    <el-radio :label="3" >未知</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="手机号">
                <el-col :span="24">
                    <!-- <el-input v-model="form.mobile" @focus="focus_phone" :suffix-icon="ArrowRight"/> -->
                    <el-input v-model="form.phone" :suffix-icon="ArrowRight"/>

                </el-col>
                <el-dialog v-model="is_phone" title="" width="30%" style="border-radius:15px;">
                    <div style="font-size:24px;font-weight:bold;color:#333;">修改手机号</div>
                    <div style="padding-top:38px;" class="flex flex-j-c">
                        <el-form :model="form_phone" label-width="0" size="large">
                            <el-form-item label="" class="flex">
                                <div style="font-size:18px;font-weight:bold;" class="p-r">手机号</div>
                                <div style="width: 400px;">
                                    <el-input v-model="form_phone.phone" placeholder="请输入手机号" style="height: 56px;"/>
                                </div>
                                
                            </el-form-item>
                            <el-form-item label="" style="margin-top:40px;">
                                <div style="font-size:18px;font-weight:bold;" class="p-r">验证码</div>
                                <div style="width: 400px;">
                                    <el-input v-model="form_phone.phone" placeholder="请输入验证码" style="height: 56px;">
                                        <template #append>
                                            <div class="cursor-p" @click="send" style="color: #d10b00;">
                                                {{ str }}
                                            </div>
                                        </template>
                                    </el-input>
                                </div>
                                
                            </el-form-item>
                        </el-form>
                    </div>
                    <div style="padding-top:44px;" class="flex flex-j-c">
                        <div style="width: 238px;height: 58px;color:#fff;background:#d00b00;border-radius:30px;line-height:58px;font-size:18px;">确认修改</div>
                    </div>
                </el-dialog>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-col :span="24">
                    <el-input v-model="form.email" />
                </el-col>
            </el-form-item>
            <el-form-item label="微信">
                <el-col :span="24">
                    <el-input v-model="form.wechat"/>
                </el-col>
            </el-form-item>
            <el-form-item label="出生日期">
                <el-col :span="24">
                    <el-date-picker
                        v-model="form.birthday"
                        type="date"
                        placeholder="选择出生日期"
                        format="YYYY/MM/DD"
                        value-format="YYYY-MM-DD"
                        style="width:100%;"
                    />
                </el-col>
            </el-form-item>
            <el-form-item label="所在单位">
                <el-col :span="24">
                    <el-input v-model="form.addr"/>
                </el-col>
            </el-form-item>
        </el-form>
        <div class="btn-submit cursor-p" @click="submit" style="margin:100px auto;">提交</div>
    </div>
    
</template>

<script setup>
import { ref,reactive,getCurrentInstance,watch } from "vue";
const { proxy } = getCurrentInstance();
import CryptoJS from 'crypto-js';
import * as qiniu from 'qiniu-js'
import md5 from 'js-md5'
import { useStore } from 'vuex';
const store = new useStore();
    const progress = ref('')
    const loading = ref(false)
    // 服务器资源
    const imgUrl = ref('')
    const qnToken = ref('')
    const get_resource =()=>{
        proxy.$http.request(proxy.$api.get_resource,'get',{},false, function (res) {
            if(res&&res.data){
                imgUrl.value = res.data.data.imgUrl
            }
        })
    }
    get_resource()
    const headers = ref({
        Authorization: ''
    })
    const get_qntoken =()=>{
        proxy.$http.request(proxy.$api.qnToken+'1','get',{},false, function (res) {
            if(res&&res.data){
                qnToken.value = res.data.data.token
                headers.value.Authorization = res.data.data.token
            }
        })
    }
    get_qntoken()
    const form = ref({

    })
    // 个人信息
    const loginData = JSON.parse(localStorage.getItem( 'loginData' ))
    const getUserInfo=()=>{
        if(loginData){
            form.value = JSON.parse(localStorage.getItem( 'user' ))
        }else{
            dialogVisible.value = true
        }
        
    }
    getUserInfo()
    const getUserInfoAgain=()=>{
        proxy.$comJs.getUserInfo((res)=>{
            form.value = res
        })
    }
    getUserInfoAgain()
    // 设置头像
    const is_usericon = ref(false)
    const edit_usericon = ()=>{
        is_usericon.value = true
    }
    // 头像上传
    const uploadfile = ref(null)
    const fileList = ref([])
    // 必须手动上传文件
    const handleUploadChange = (event) => {
      const file = event.raw;
      var key =  Math.random().toString(36).substring(2)+"_"+ file.name
        const observable = qiniu.upload(file, key, qnToken.value,{fname:key})
        const observer = {
            next(res) {
                progress.value = res.total.percent
            },
            error(res) {
                
            },
            complete(res) {
                form.value.hearIcon = res.key
                progress.value = 0
                uploadfile.value.clearFiles()
                is_usericon.value = false
            }
        }
        observable.subscribe(observer);
    };
    // 修改会员中心-个人信息
    const submit=()=>{
        loading.value = true
        proxy.$http.request(proxy.$api.user_pull,'put',{
            ...form.value
        },false, function (res) {
            loading.value = false
            if(res&&res.data){
                proxy.$comJs.msg('success','修改成功',1)
                getUserInfoAgain()
            }
        })
    }
    
    watch(
        () => is_usericon.value,
        (val) => {
            if(val){
                setTimeout(()=>{
                    uploadfile.value.clearFiles()
                    progress.value = 0
                },500)
                
            }else{

            }
        },
        { immediate: true }
    )
    const is_phone = ref(false)
    const focus_phone = ()=>{
        is_phone.value = true
    }
    const form_phone = ref({
        phone:''
    })
    const str = ref('发送验证码')
    const send = ()=>{
        str.value = 20
        setInterval(() => {
            if(str.value > 0){
                str.value = str.value-1
            }else{
                str.value = '发送验证码'
            }
        }, 1000);
    }
</script>

<style lang='less' scoped>
.userIconView{
    width: 57px;
    height: 57px;
    border-radius: 50%;
    background: #d00b00;
    cursor: pointer;
}
</style>
  
  


